import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { NavLink } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFolder, faImage, faUsers } from '@fortawesome/free-solid-svg-icons'
import { useRecoilState } from 'recoil'
import { SearchTopicListMock } from './mock'
import { Select } from 'antd'

const { Option } = Select

interface ISearchTabProps {
    searchValue: string
    type: string
}

export default function SearchTabs(props: ISearchTabProps) {
    const [topicList, setTopicList] = useRecoilState(SearchTopicListMock)
    const [searchType, setSearchType] = useState(props.type)
    const [choseType, setChoseType] = useState('one')
    const [choseTopic, setChoseTopic] = useState('one')

    // 初始化布局
    useEffect(() => {
        if (searchType == 'photos') $(`.${style.right}`).addClass('show')
        else $(`.${style.right}`).removeClass('show')
    }, [searchType])

    useEffect(() => {
        if (choseTopic != 'one' || choseType != 'one') $(`.${style.clear__btn}`).addClass('show')
        else $(`.${style.clear__btn}`).removeClass('show')
    }, [choseType, choseTopic])

    return (
        <div className={style.container}>
            <div className={style.left}>
                <NavLink
                    to={'/search/photos/' + props.searchValue}
                    className={style.item}
                    onClick={() => {
                        setSearchType('photos')
                    }}>
                    <FontAwesomeIcon icon={faImage} className={style.icon} />
                    <span>图片</span>
                </NavLink>
                {/*<NavLink to={'/search/collections/' + props.searchValue} className={style.item}>*/}
                {/*    <FontAwesomeIcon icon={faFolder} className={style.icon} />*/}
                {/*    <span>收藏夹</span>*/}
                {/*</NavLink>*/}
                <NavLink
                    to={'/search/user/' + props.searchValue}
                    className={style.item}
                    onClick={() => {
                        setSearchType('user')
                    }}>
                    <FontAwesomeIcon icon={faUsers} className={style.icon} />
                    <span>用户</span>
                </NavLink>
            </div>

            <div className={style.right}>
                <div
                    className={style.clear__btn}
                    onClick={() => {
                        setChoseType('one')
                        setChoseTopic('one')
                    }}>
                    <span>清除</span>
                </div>
                <Select
                    defaultValue={choseType}
                    value={choseType}
                    bordered={false}
                    onChange={value => {
                        setChoseType(value)
                    }}
                    style={{ width: '120px' }}>
                    <Option value={'one'}>任意形状</Option>
                    <Option value={'Square'}>
                        <div className={style.item}>
                            <div className={style.shape__Square} /> 正方形
                        </div>
                    </Option>
                    <Option value={'Portrait'}>
                        <div className={style.item}>
                            <div className={style.shape__Portrait} /> 竖长方形
                        </div>
                    </Option>
                    <Option value={'Landscape'}>
                        <div className={style.item}>
                            <div className={style.shape__Landscape} /> 横长方形
                        </div>
                    </Option>
                </Select>
                <Select
                    defaultValue={choseTopic}
                    value={choseTopic}
                    bordered={false}
                    onChange={value => {
                        setChoseTopic(value)
                    }}>
                    <Option value={'one'}>任意专题</Option>
                    {topicList.map((item, index) => {
                        return (
                            <Option value={item.topicId} key={index}>
                                {item.topicName}
                            </Option>
                        )
                    })}
                </Select>
            </div>
        </div>
    )
}
